<template>
  <div>
    <div class="top">
      <div class="search">
        <div class="search-box">
          <div class="city">
            <span class="site" @click="$router.push('/citylist')" ref="dz">上海</span>
            <van-icon name="arrow-down" />
          </div>
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            background="#fff"
          />
        </div>
        <div class="icon" @click="$router.push('/baidumap')">
          <van-icon name="location-o" color="#fff" size="18px" />
        </div>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in Src" :key="item.id">
          <img v-lazy="'http://liufusong.top:8080' + item.imgSrc" alt="img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid :border="false" icon-size="36px">
        <van-grid-item icon="home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="location-o" to="/baidumap" text="地图找房" />
        <van-grid-item icon="wap-home-o" text="去出租" to="/housing"/>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { Swiper } from '@/api/other'
import { getStr } from '@/utils/storage'
export default {
  data () {
    return {
      Src: [],
      value: ''
    }
  },
  async created () {
    const { body } = await Swiper()
    // console.log(body)
    this.Src = body
    this.$refs.dz.innerText = getStr() ? JSON.parse(getStr()).label : '上海'
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.top {
  position: relative;

  .my-swipe .van-swipe-item {
    color: #fff;
    background-color: skyblue;
    height: 212px;
    img {
      vertical-align: bottom;
      width: 100%;
    }
  }
  .search {
    position: absolute;
    top: 30px;
    padding: 0px 15px;
    /*  background-color: pink; */
    z-index: 2;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;

    .search-box {
      /*  min-width: 250px; */
      flex: 1;
      display: flex;
      text-align: center;
      margin-right: 16px;
      background-color: #fff;
      border-radius: 5px;
      overflow: hidden;
      padding: 10px 0px;
      .van-cell.van-cell--borderless.van-field {
        padding: 0;
        background-color: #fff;
        height: 20px;
      }
      .city {
        background-color: #fff;
        height: 20px;
        line-height: 20px;
        padding: 0px 10px;
        border-right: 1px solid #e5e5e5;
        margin-right: 10px;
      }
    }
    .icon {
      width: 30px;
      height: 30px;
      border: 2.5px solid #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
    }
  }
}
.van-icon.van-icon-photo-o {
   width: 60px;
   height: 60px;
   background-color: aqua;
}
</style>
